<template>
  <div class="span">
    <table  class="table table-condensed" style="margin-top:15px; margin-left:5%; width:90%;text-algin:center">
      <thead>
        <tr>
          <th>操作</th>
          <th>阶梯数</th>
          <th>气量</th>
          <th>单价</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in stairmodel">
          <td>
            <button class="glyphicon glyphicon-minus btn-danger" @click.stop="delGas($index)"></button>&nbsp;&nbsp;&nbsp;
            <button class="glyphicon glyphicon-plus btn-success" @click.stop="addGas()"></button>
          </td>
          <td v-if='!row.f_price_name'>{{$index+1}}</td>
          <td v-if='row.f_price_name'>{{row.f_price_name}}</td>
          <td>
            <input class="form-control" style="background-color: white" type="number" v-model="row.f_gas" :disabled="isDisable"
            placeholder="气量">
          </td>
          <td>
            <input class="form-control" style="background-color: white" type="number" v-model="row.f_price" :disabled="isDisable"
            placeholder="单价">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
/**
*阶梯气价管理组件
*/
export default {
  data () {
    return {
    }
  },
  props: ['stairmodel', 'isDisable'],
  watch: {
    'stairmodel' (val) {
      // val.push({})
    }
  },
  methods: {
    addGas () {
      this.stairmodel.push({})
    },
    delGas (index) {
      if (this.stairmodel.length > 1) {
        this.stairmodel.splice(index, 1)
      }
    }
  }
}
</script>
<style>
input { outline:none; }
</style>
